<script setup lang="ts">
  import ObsImage from '#/components/obsImage.vue';
  const props = defineProps<{
    footer: any
  }>()
</script>
<template>
  <div class="w-full h-auto bg-[#3A3C49] p-[24px]">
    <div class="w-full overflow-hidden max-w-[1200px] m-auto pl-[100px] pr-[100px] flex justify-center items-start gap-[120px]">
      <!-- 左侧文字信息 -->
      <div class="flex-1 text-white min-w-0">
        <div class="text-[16px] leading-[24px] mb-[20px] whitespace-pre-line break-words">
          {{ props.footer.provideContent }}
        </div>
        <div class="text-[14px] leading-[20px] mb-[8px] flex items-start" >
          <div class="flex-shrink-0 w-[70px]">
            {{ `${$t('certificate.settingFooter.phone')}：` }}
          </div>
          <div class="flex-1 whitespace-pre-line break-words">{{ props.footer.phone }}</div>
        </div>
        <div class="text-[14px] leading-[20px] flex items-start">
          <div class="flex-shrink-0 w-[70px]">
            {{ `${$t('certificate.settingFooter.email')}：` }}
          </div>
          <div class="flex-1 whitespace-pre-line break-words">{{ props.footer.email }}</div>
        </div>
      </div>
      
      <!-- 右侧二维码 -->
      <div class="flex-none flex gap-[24px] w-[184px] ml-[32px] flex-shrink-0">
        <div class="flex flex-col items-center">
          <div class="w-[80px] h-[80px] rounded-[4px] mb-[8px] flex items-center justify-center">
            <!-- 这里可以放置实际的二维码图片 -->
            <div class="w-[80px] h-[80px] rounded-[4px] overflow-hidden">
              <ObsImage 
              v-if="props.footer.publicAccount.code"
              :src="props.footer.publicAccount.code" 
              :showPreview="false" 
              :imgStyle="{width: '80px', height: '80px', objectFit: 'contain'}" 
            />
            </div>
          </div>
          <span class="text-white text-[14px]">{{props.footer.publicAccount.desc}}</span>
        </div>
        
        <div class="flex flex-col items-center">
          <div class="w-[80px] h-[80px] rounded-[4px] mb-[8px] flex items-center justify-center">
            <!-- 这里可以放置实际的二维码图片 -->
            <div class="w-[80px] h-[80px] rounded-[4px] overflow-hidden">
              <ObsImage 
              v-if="props.footer.service.code"
              :src="props.footer.service.code" 
              :showPreview="false" 
              :imgStyle="{width: '80px', height: '80px', objectFit: 'contain'}" 
            />
            </div>
          </div>
          <span class="text-white text-[14px]">{{props.footer.service.desc}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
</style>
